<template>
  <div style="width: 1251px;height: 675px;text-align: center;">
    <div style="width: 1251px;height: 675px;">
      <div
        style="width: 1239px;height: 675px;background-image:url(https://img95.699pic.com/photo/40143/6081.gif_wh300.gif!/fh/188);background-size: contain; margin-left: 10px;padding-top: 10px;">
        <div style="margin-top: 0px;width: 980px;margin-left: 130px;">
          <el-input placeholder="搜索相关类型房间" :onafterpaste="this.search=this.search.replace(/，/g,',')"
            :οnkeyup="this.search=this.search.replace(/，/g,',')" v-model="search" class="input-with-select">
            <el-button slot="append" type="primary" plain icon="el-icon-search" @click="searchButton"></el-button>
          </el-input>
        </div>
        if
        <br>
        <div>
          <el-button type="primary" style="width: 100px;" plain @click="setType('王者荣耀')">王者荣耀</el-button>
          <el-button type="primary" style="width: 100px;" plain @click="setType('金铲铲之战')">金铲铲之战</el-button>
          <el-button type="primary" style="width: 100px;" plain @click="setType('蛋仔派对')">蛋仔派对</el-button>
          <el-button type="primary" style="width: 100px;" plain @click="setType('小说')">小说</el-button>
          <el-button type="primary" style="width: 100px;" plain @click="setType('运动')">运动</el-button>
          <el-button type="primary" style="width: 100px;" plain @click="setType('动漫')">动漫</el-button>
          <el-button type="primary" style="width: 100px;" plain @click="setType('视剧')">电视剧</el-button>
          <el-button type="primary" style="width: 100px;" plain @click="setType('吃瓜')">吃瓜</el-button>
          <el-button type="primary" style="width: 100px;" plain @click="setType('生活')">生活</el-button>
        </div>
        <div class="infinite-list-wrapper" lazy v-infinite-scroll="load" infinite-scroll-disabled="disabled"
          style="min-width: 1000px;max-height: 570px; display: flex;flex-wrap: wrap;overflow: auto;padding-left: 110px;">
          <div
            style="background: linear-gradient(to bottom right, #1C146B , #3528B7);opacity: 0.9; width: 450px;height: 210px;margin: 30px;display: flex;"
            v-for="list in rooms" :key="list.rid">
            <div style="width: 25%;margin-right: 20px;">
              <div style="font-size: 20px;margin-left:5px;width: 100px;text-align: left; color: aliceblue;">{{ list.roomName }}</div>
              <img :src="list.user.uphoto" alt="" style="width: 100px;height: 100px;border-radius: 50%;margin-top: 20px;">
              <p style="margin-top: 36px;margin-left: -65px; color: aliceblue;"><i class="el-icon-user"></i>&nbsp;
                {{list.accroom.userNumber}}
              </p>
            </div>
            <div style="width: 70%;position: relative;line-height: 35px;">
              <div style="margin-top: 40px;text-align: left;">
                <p style="color: aliceblue;">
                  <span style="font-size: 20px;color:brown">房主:</span>{{ list.user.uName }}
                </p>
                <p style="color: aliceblue;"><span style="font-size: 20px;color:brown;">类型:</span><el-tag
                    style="margin-left: 3px;">{{ list.roomType }}</el-tag> </p>
                <p style="color: aliceblue;"><span style="font-size: 20px;color:brown;">主题:</span>{{ list.roomName }}
                </p>
              </div>
              <el-button @click="accessRoom(list)"
                style="position: absolute;height: 50px;right: 1.5px;bottom: 1.5px;">进入房间</el-button>
            </div>
          </div>
          <p style="width: 100%;margin-left: -60px; text-align: center;color: #fff;font-size: 18px;height: 40px;" v-if="loading">加载中...</p>
          <p style="width: 100%;margin-left: -60px;text-align: center;color: #fff;font-size: 18px;height: 40px;" v-if="noMore">没有更多了</p>
        </div>
      </div>
    </div>
    <!-- <drowerComVue /> -->
  </div>
</template>
<script>
import axios from 'axios'
// import drowerComVue from '@/components/drowerCom.vue'
export default {
  data () {
    return {
      rooms: [],
      search: '',
      loading: false,
      count: 10,
      countNumber: 0,
      myUser: [JSON.parse(sessionStorage.getItem('user'))]
    }
  },
  computed: {
    noMore () {
      return this.count >= this.countNumber
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  components: {
    // drowerComVue
  },
  methods: {
    getRooms (roomType) {
      axios.defaults.withCredentials = true

      axios({
        url: 'http://152.136.143.223:9091/room',
        method: 'get',
        params: {
          count: this.count,
          hobbys: this.myUser[0].uhobby,
          search: roomType != null ? roomType : this.search
        }
      }).then((res) => {
        this.getRommCount()
        this.rooms = res.data.data
      })
    },
    getRommCount () {
      axios.defaults.withCredentials = true

      axios({
        url: 'http://152.136.143.223:9091/room/count',
        method: 'get'
      }).then((res) => {
        this.countNumber = res.data.data
      })
    },
    load () {
      this.loading = true
      if (this.count < this.countNumber) {
        setTimeout(() => {
          this.count += 10
          this.getRooms()
          this.loading = false
        }, 1500)
      } else {
        this.loading = false
      }
    },
    searchButton () {
      this.count = 10
      this.getRooms()
      this.getRommCount()
    },
    setType (roomType) {
      this.count = 10
      this.getRooms(roomType)
      this.getRommCount(roomType)
    },
    accessRoom (room) {
      if (this.myUser[0].ustatusID === 0) {
        this.$message('登录后享更多权限')
      } else {
        axios.defaults.withCredentials = true

        axios({
          url: 'http://152.136.143.223:9091/room/addUserRoom',
          method: 'POST',
          params: {
            rID: room.rid,
            roomInitiator: room.accroom.roomInitiator,
            enteredRoom: this.myUser[0].uid
          }
        }).then((res) => {
          if (res.data.data > 0) {
            this.$router.push({
              name: 'accroom',
              query: { room: JSON.stringify(room) }
            })
          } else {
            this.$notify({
              title: '信息',
              message: '登录后享更多权限'
            })
          }
        })
      }
    }
  },
  beforeMount () {
    this.getRooms()
  }
}
</script>

<style scoped lang="scss">

</style>
